

<template>
<div>
  <div class="goodsImg-mokuai">
    <!-- 筛选查找 -->
     <div class="goodsImg-index">
       <div  class="goodsImg-index-top">
    <div class="goodsImg-name">
      <div class="goodsImg-name-font">
        <i class="el-icon-search"></i>
        筛选查询
      </div> 
      <div class="goodsImg-name-right">
          <el-button @click="onSubmit">开始查询</el-button>
      </div>
        <div class="goodsImg-name-right" @click="packUp">
        <i class="el-icon-arrow-up"></i>
        收起筛选
      </div> 
    </div>
    <div  class="goodsImg-content">   
<!-- 筛选条件 -->
 <div class="goodsImg-button-select-2"  v-if="showPrise">
 <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="输入搜索:">
            <el-input v-model="formInline.goodsImgName" placeholder="相册名称" class="select-width-1"></el-input>
          </el-form-item>
        </el-form>
 </div>

 

    </div>
     </div>
   </div>

    <!-- 数据模块 -->
  <div class="goodsImg-index">
      <div  class="goodsImg-index-top">
    <div class="goodsImg-name">
      <div class="goodsImg-name-font">
        <i class="el-icon-s-unfold"></i>
        数据列表
      </div> 
       <div class="goodsImg-index-select">
         <div class="good-left goodsImg-index-select-button"><el-button @click="onSubmitImg" size="small">新建相册</el-button></div>
         <div class="good-left">
             <el-form :inline="true" :model="listLine" class="demo-form-inline" size="small">
          <el-form-item label="">
            <el-select @change="changeNum" v-model="listLine.row" placeholder="显示条数" class="select-width-2">
              <el-option label="10条" value="10"></el-option>
              <el-option label="20条" value="20"></el-option>
                <el-option label="30条" value="30"></el-option>
            </el-select>
          </el-form-item>
            <el-form-item label="">
            <el-select @change="changeNum2" v-model="listLine.sort" placeholder="排序方式" class="select-width-2">
              <el-option label="排序" value=""></el-option>
              <el-option label="名称" value="1"></el-option>
            </el-select>
          </el-form-item>
  
        </el-form>
         </div>
          
        
      </div>
    </div>
    <div  class="goodsImg-content">   
<!-- 数据列表 -->
 <div>
<el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    border
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55"
      align="center">
    </el-table-column>
    <el-table-column
      label="编号"
      width="90"
      align="center">
      <template slot-scope="scope">{{ scope.row.id }}</template>
    </el-table-column>
    <el-table-column
      prop="title"
      label="相册名称"
      width="140"
      align="center">
    </el-table-column>
      <el-table-column
      prop="image"
      label="封面"
      width="110"
      align="center">
       <template scope="scope">
              <img :src="requestUrl+scope.row.image" width="70" height="50" class="head_pic" />
      </template>
    </el-table-column>
    <el-table-column
      prop="imageNum"
      label="图片数量"
      width="100"
      align="center">
    </el-table-column>
   
     <el-table-column
      prop="sort"
      label="排序"
      width="100"
      align="center">
    </el-table-column>
     <el-table-column
      prop="instruction"
      label="描述"
      align="center"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column prop="imageItems" v-if='show=false' show-overflow-tooltip> </el-table-column>
  <el-table-column fixed="right" label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.$index, scope.row)" type="text" size="small">查看</el-button>
              <el-button @click="handleClickTwo(scope.$index, scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="deletes(scope.$index, scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
  </el-table>
 </div>
 <!-- 页脚 -->
<div class="goodsImg-paging">
  <!-- 批量操作 -->
    <div class="goodsImg-paging-leftlayout">
      <div class="opertation-block">
        <!-- 全选需要设置方法目前只能操作0，1数据 -->
          <el-checkbox @change="toggleSelectionCheckbox" v-model="checkbox">全选</el-checkbox>
      </div>
      <div class="opertation-block">
        <el-form :inline="false" :model="operation" class="demo-form-inline" size="small">
          <el-form-item label="">
            <el-select v-model="operation.opertationType" placeholder="批量操作" class="select-width-2">
              <el-option label="删除" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="opertation-block" >
    <el-button size="small" @click="moreConfig">确定</el-button>
      </div>
    </div>
    <!-- 分页 -->
<div class="goodsImg-paging-layout">
<div class="block">
    <span class="demonstration"></span>
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :page-size="listLine.row"
      :current-page.sync="currentPage1"
      layout="total, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
 </div>
</div>
 

    </div>
     </div>
   </div>
</div>
  </div>
</template>


<style>
/* 自定义 */

.select-width-1{
  width: 200px;
}
.select-width-2{
  width: 100px;
}
.good-left{
  float:left;
}
.goodsImg-mokuai{
  height: 1000px;
  background-color: rgb(249, 249, 249);

}
.goodsImg-index{
  width: 100%;
  margin: auto;
  background-color: rgb(255, 255, 255);

}
.goodsImg-index-top{
 margin-top: 30px;
}
.goodsImg-name{
  width: 100%;
  height:50px;
  padding-top: 10px;
  background-color: rgb(240, 240, 240);

}
.goodsImg-name-font{
   height: 40px;
  line-height: 40px;
  float: left;
  margin-left: 20px;
   font-size: 14px;
}
.goodsImg-name-right{
   height: 40px;
  line-height: 40px;
  float: right;
  margin-right: 20px;
  font-size: 14px;
}
.goodsImg-index-select{
  width: 350px;
  float: right;
  margin-right: 20px;
  font-size: 14px;
  padding-top: 5px;

}
.goodsImg-index-select-button{
margin-right: 20px;
}
.goodsImg-content{
  width: 100%;
}
.goodsImg-button-select-2{
  height: 50px;
 padding-top:10px;
 padding-left: 20px;

}

.opertation-block{
  display: inline-block;
  margin-left: 3px;
}
.goodsImg-paging{

  height: 50px;
  width: 100%;
  background-color: rgb(253, 253, 254);
}
.goodsImg-paging-leftlayout{
  float:left;
   margin-top: 7px;
}
 .goodsImg-paging-layout{
  float: right;
  margin-top: 7px;
 }
</style>

<script>
    import goodImgeListApi from "@/api/goods/imagelist";
   export default {
    data() {
       
      return {
          requestUrl:goodImgeListApi.getRequestUrl().defaults.baseURL+"/api-goods/album/",
          checkbox: false,
        // 隐藏
       showPrise:true,
        // 筛选
         formInline: {
           goodsImgName:""
         
      },
      listLine: {
       row:"10",
       sort:"",

      },
      operation:{
      opertationType:"0",
      },
        // 列表数据
         tableData: [
        ],
         
        multipleSelection: [],
        // 分页
          currentPage1:1,
        total:0
      }
    },
      methods: {
        // 数据列表
          toggleSelectionCheckbox() {
              if(this.checkbox){
                  this.tableData.forEach(row => {
                      this.$refs.multipleTable.toggleRowSelection(row);
                  });
              }else{
                  this.$refs.multipleTable.clearSelection();
              }
      },
      handleSelectionChange(val) {
          this.multipleSelection = val;
          if(val.length == this.tableData.length){
              this.checkbox = true;
          }else if(val.length != this.tableData.length){
              this.checkbox = false;
          }
      },
         handleClick(index,row) {
           this.$router.push({path:"/goods/goodsImageList",query:{imageItems:row.imageItems,parentId:row.id}});
         },
         handleClickTwo(index,row) {
           this.$router.push({path:"/goods/createImage",query:{id:row.id,title:row.title,instruction:row.instruction,sort:row.sort,image:this.requestUrl+row.image}});
         },
          moreConfig(){
              this.$confirm('是否确定删除？', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
              }).then(() => {
                  var ids = "";
                  for(var i=0;i<this.multipleSelection.length;i++){
                      ids+=this.multipleSelection[i].id;
                      if(i!=(this.multipleSelection.length-1)){
                          ids+=","
                      }
                  }
                  this.axios.get(this.requestUrl+"/deletes?token=11&ids="+ids+"&test=").then((response) => {
                      if(response.data.code == 200){
                          this.$message({
                              type: 'success',
                              message: '删除成功!'
                          });
                          this.initData();
                      }
                  })
              });
          },
          deletes(index,row){
              this.$confirm('是否确定删除？', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
              }).then(() => {
                  this.axios.get(this.requestUrl+"/deletes?token=11&ids="+row.id+"&test=").then((response) => {
                      if(response.data.code == 200){
                          this.$message({
                              type: 'success',
                              message: '删除成功!'
                          });
                          this.initData();
                      }
                  })
              });
          },
      handleCurrentChange(val) {
          this.initData();
      },
      onSubmit() {
          this.initData();
    },
    changeNum(){
        this.currentPage1=1;
        this.initData();
    },
    changeNum2(){
        this.currentPage1=1;
       this.initData();
     },
    onSubmitImg() {
      this.dialogVisible = true;
      this.$router.replace({path:"/goods/createImage"});
    },
    // 点击显示和隐藏
    packUp:function(){
     this.showPrise = !this.showPrise;
     },
     initData: function (){
         this.axios.get(this.requestUrl+"page?sort="+this.listLine.sort+"&pageSize="+this.listLine.row+"&pageNum="+this.currentPage1+"&title="+this.formInline.goodsImgName+"&test=").then((response) => {
             if(response.data.code == 200){
                 this.tableData = response.data.msg.list;
                 this.currentPage1=response.data.msg.pageNum;
                 this.total=response.data.msg.total;
             }
         })
     },
    },
     mounted() {
         this.initData();
     }
  }
  
</script>